import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
import {resolve} from 'path'
//icon
import viteSvgIcons from 'vite-plugin-svg-icons'
//setup name
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

import styleImport from 'vite-plugin-style-import'
//
import autoprefixer from 'autoprefixer'


// https://vitejs.dev/config/

export default defineConfig({
    // 忽略后缀
    resolve: {
        // 别名
        alias: {
            '@': resolve(__dirname, 'src'),
            comps: resolve(__dirname, 'src/components'),
            apis: resolve(__dirname, 'src/api'),
            views: resolve(__dirname, 'src/view'),
            utils: resolve(__dirname, 'src/utils'),
            routes: resolve(__dirname, 'src/routes'),
            styles: resolve(__dirname, 'src/style'),
            layouts: resolve(__dirname, 'src/layout'),
        },
        // 配置忽略的扩展名
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    //插件
    plugins: [
        vue({
            refTransform: true // 开启ref转换
        }),
        vueJsx(),
        VueSetupExtend(),
        //icon 组件
        viteSvgIcons({
            // config svg dir that can config multi
            iconDirs: [resolve(process.cwd(), 'src/icons/common'), resolve(process.cwd(), 'src/icons/nav-bar')],
            // appoint svg icon using mode
            symbolId: 'icon-[dir]-[name]'
        }),
        //按需加载
        AutoImport({
            resolvers: [ElementPlusResolver()]
        }),
        Components({
            resolvers: [ElementPlusResolver()]
        }),
        styleImport({
            libs: [
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    ensureStyleFile: true,
                    resolveStyle: (name) => {
                        return `element-plus/lib/theme-chalk/${name}.css`;
                    },
                    resolveComponent: (name) => {
                        return `element-plus/lib/${name}`;
                    },
                },
            ],
        }),
    ],

    css: {
        postcss: {
            plugins: [autoprefixer],
        },
        preprocessorOptions: {
            // 引入全局 scss
            scss: {
                additionalData: `@import "@/style/variables.scss";`,
                javascriptEnabled: true,
            },
        },
    },
    // 强制预构建插件包
    optimizeDeps: {
        include: ['axios'],
    },
    //正式打包配置
    build: {
        target: 'modules',
        outDir: 'dist', //指定输出路径
        assetsDir: 'static/assets',//指定生成静态资源的存放路径
        minify: 'terser', // 混淆器，terser构建后文件体积更小
        brotliSize: false,//关闭打包计算
        // 消除打包大小超过500kb警告
        chunkSizeWarningLimit: 2000,
        // 在生产环境移除console.log
        terserOptions: {
            compress: {
                drop_console: false,
                pure_funcs: ['console.log', 'console.info'],
                drop_debugger: true,
            },
        },

        // 静态资源打包到dist下的不同目录
        rollupOptions: {
            output: {
                chunkFileNames: 'static/js/[name]-[hash].js',
                entryFileNames: 'static/js/[name]-[hash].js',
                assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            },
        },
    },
    //开发
    server: {
        host: true, // host设置为true才可以使用network的形式，以ip访问项目
        port: 8080, // 端口号
        open: false, // 自动打开浏览器
        cors: true, // 跨域设置允许
        strictPort: true, // 如果端口已占用直接退出
        // 接口代理
        proxy: {
            '/api': {
                // 本地 8000 前端代码的接口 代理到 8888 的服务端口
                target: 'http://192.168.5.21:8973/',
                changeOrigin: true, // 允许跨域
                rewrite: (path) => path.replace('/api/', '/'),
            },
        },
    },
})
